<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Myhello></Myhello>
        <Myworld></Myworld>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>   
        //使用component方法注册的组件叫全局组件
        // app.component("ChildComponent",{
        //     data(){},
        //     methods:{
               
        //     },
        //     template:`
        //         <h1>hello</h1>
        //     `
        // });

        //使用components属性实现局部组件
        const myHello = {
            template:`
                <h1>hello</h1>
            `
        }

        const myWorld = {
            components:{
                "Myworld":myHello
            },
            template:`
                <h1>world</h1>
                <Myworld></Myworld>
            `
        }
        //根组件的配置
        const app = Vue.createApp({
            //注册两个局部组件
            components:{
                "Myhello":myHello,
                "Myworld":myWorld
            }

        })
        //挂载
        app.mount("#app");

    </script>
</body>
</html>